<template>
    <div class="container ">
        <div class="banner-img">
            <img src="http://api.ddhk.net/storage/images/13/about_us/20250910091224622822.jpg" alt="">
        </div>

    </div>

    <div class="container">

        <h3 class="t-c">Our Factory</h3>

    </div>
    <div class="npi">
        <div class="npi__items">
            <div class="npi__item"></div>
            <div class="npi__item">
                <div class="npi__description lazy come-in--right entered come-in--animate" data-lazy-function="slideIn"
                    data-ll-status="entered">
                    <div class="npi__description-wrapper">
                        <div class="npi__description-text">

                            <p>The Jiaozhou factory currently has a total of 8 processes, including sheet metal, stamping,
                                injection molding, welding, mechanical assembly, electrical assembly, painting and
                                machining. lt has the processing advantages of small batch and multiple varieties, and can
                                process various high-quality spare parts and complete machine assemblies.</p>
                        </div>
                    </div>
                </div>
                <div class="npi__image-wrapper">
                    <img class="npi__image lazy entered loaded" data-ll-status="loaded"
                        src="http://api.ddhk.net/storage/images/13/aboutus_factory/20250911030324464694.jpg">
                </div>
            </div>

        </div>

    </div>


    <!-- 轮播图开始 -->
    <div class="container ">
        <Swiper :loop="true">

            <!-- <SwiperSlide v-for="(item, index) in images" :key="index">

                <img :src="item" class="slide-image" alt="轮播图" />

            </SwiperSlide> -->


            <SwiperSlide v-for="item, index in images" :key="index">

                <img :src="item" class="slide-image" alt="轮播图" />

            </SwiperSlide>

            
        </Swiper>
    </div>

    <!-- 轮播图结束 -->
</template>

<script setup>

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation];
const images = [

    "http://api.ddhk.net/storage/images/13/aboutus_factory/20250911030300932007.jpg",
    "http://api.ddhk.net/storage/images/13/aboutus_factory/20250911030302248989.jpg",
    "http://api.ddhk.net/storage/images/13/aboutus_factory/20250911030305702121.jpg",
    "http://api.ddhk.net/storage/images/13/aboutus_factory/20250911030308855765.jpg"
];
</script>

<style lang="less">
.m-t20 {
    margin-top: 20px;
}
.t-c{
    text-align: center;
}
.npi__description-text {

    p {

        max-width: 500px;
        line-height: 2;


    }
}</style>


<style scoped>

/* .swiper-container{
    width:800px;
    max-width:100%;
    height: 400px;
    margin: 0 auto;

} */
.slide-image {

    width: 100%;
    height: 100%;
    object-fit: cover;
    /*图片自适应容器，保持比例*/

}</style>